<template>
  <el-card class="box-card">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="菜单名称:" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="上级菜单:" prop="pass">
        <el-select v-model="ruleForm.parentId" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称:" prop="name">
        <el-input v-model="ruleForm.name" disabled />
      </el-form-item>
      <el-form-item label="前端图标:" prop="pass">
        <el-input v-model="ruleForm.icon" disabled />
      </el-form-item>
      <el-form-item label="是否显示:" prop="pass">
        <el-radio-group v-model="ruleForm.hidden" class="ml-4">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序:" prop="pass">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script lang="ts" setup>
import { computed, reactive, Ref, ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { LocationQueryValue, useRoute } from "vue-router";
import * as http from "./api/http";

// 表单dom
const ruleFormRef = ref<FormInstance>();
// 表单数据
let ruleForm: IAddMeunList = reactive({
  createTime: "",
  hidden: 0,
  icon: "",
  id: 0,
  level: 0,
  name: "",
  parentId: 0,
  sort: 0,
  title: "",
});
// 下拉框数据
const options: IAddMeunList[] = reactive([
  {
    id: 0,
    title: "无上级菜单",
  },
]);
// 获取下拉框数据
http.addMenu.MenuList(0).then((res) => {
  options.push(...res.data.list);
});
// 获取数据
const route = useRoute();
let id = ref<LocationQueryValue>(route.query.id as LocationQueryValue);
if (id) {
  http.addMenu.getMenu(id.value).then((res) => {
    if (res.code == 200) {
      Object.assign(ruleForm, res.data);
    }
  });
}
// 表单校验实例
const rules = reactive({
  title: [{ required: true, message: "菜单名称不能为空!", trigger: "blur" }],
  name: [{ required: true, message: "前端名称不能为空!", trigger: "blur" }],
});
// 确认事件
const submitForm = (formEl: FormInstance | undefined) => {
  ruleFormRef.value
    ?.validate()
    .then((res) => {
      console.log("submitForm");
      http.addMenu
        .MenuUpdate(ruleForm)
        .then((res) => {
          console.log(res);
          ElMessage.success(res.message);
        })
        .catch((err) => {
          ElMessage.error(err.message);
        });
    })
    .catch(() => {});
};
</script>

<style lang="less" scoped></style>
